<template>
  <g-form-wrap :title="title" :on-save-btn-click="onSaveBtnClick">
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="formRules"
      label-position="left"
      label-width="140px"
      inline
    >
      <div class="w-full">
        <el-row type="flex" >
          <el-col :span="12">
            <el-form-item label="主题" prop="subject">
              <el-input
                v-model="formData.subject"
                placeholder="请输入主题"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据状态：" prop=" dataStatus">
              <g-select
                v-model="formData.dataStatus"
                placeholder="请选择数据状态"
                class="edit-item"
                :options="[{'id': 1, 'name': '有效'}, {'id': 2, 'name': '无效'}]"
                :filterable="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="发布日期：" prop="publishDate">
              <el-date-picker
                  v-model="formData.publishDate"
                  :append-to-body="false"
                  class="search-item"
                  type="date"
                  placeholder="请输入发布日期"
                  format="YYYY-MM-DD"
                  value-format="x"
                />
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-row type="flex">
          <el-tooltip :visible="showTip">
            <template #content>
              <span>输入多条使用回车分割</span>
            </template>
            <el-col :span="24">
              <el-form-item label="更新内容：" prop="content" @mouseenter="showTip = true" @mouseleave="showTip = false">
                <el-input
                  v-model="formData.content"
                  placeholder="请输入更新内容"
                  :rows="4"
                  type="textarea"
                  class="edit-item"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-tooltip>
        </el-row>
      </div>
    </el-form>
  </g-form-wrap>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import elv from '@/utils/elValidation'
import { getVersionByIdApi, addVersionApi, updateVersionApi } from '@/api/system'
import { Page } from '@/types/storeModule'
import { assign, cloneDeep, omit } from 'lodash-es'

const showTip = ref<boolean>(false)
const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
let options = ref<any>([])
let formData = ref(<
  {
    id: string | number
    subject: string
    content: string
    publishDate: string | number
    dataStatus: number
  }
>{
  id: 0,
  subject: '',
  content: '',
  publishDate: '',
  dataStatus: 1
})
const formRules = reactive<FormRules>({
  subject: [{ required: true, message: '请输入主题', trigger: 'change' }],
  content: [{ required: true, message: '请输入更新内容', trigger: 'change' }],
  publishDate: [{ required: true, message: '请选择发布日期', trigger: 'change' }],
  dataStatus: [{ required: true, message: '请选择数据状态', trigger: 'change' }]
})
const id = route.query.id as string | number;
const title = route.meta.title as string;
isEditing.value = id > 0 ? true : false;
// 编辑时
if (isEditing.value) {
  const getVersionByIdFunc = async () => {
    const data = await getVersionByIdApi({id: id});
    if (data.pid == 0) data.pid = ''
    formData.value = cloneDeep(omit(data, ['History', 'history', 'repeatKeys']));
  }
  getVersionByIdFunc();
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
  ruleForm.value?.validate((valid) => {
    if (valid) {
      loading(true)
      if (isEditing.value) {
        // console.log('formData---update', formData);
        updateVersionApi(formData.value).then((res) => {
          // console.log('res---update', res);
          if(res*1 === 200)
            ElMessage.success('编辑成功')
        })
      } else {
        // console.log('formData---add', formData);
        addVersionApi(formData.value).then((res) => {
          // console.log('res---add', res);
          if(res*1 === 201)
            ElMessage.success('添加成功')
        })
      }
      setTimeout(() => {
        loading(false)
        router.back()
      }, 100)
    } else {
      return false
    }
  })
}
</script>